// 画布平移
<template>
  <span style="margin: 10px">画布平移:</span>
  <el-switch v-model="switchValue" @change="switchChange" style="margin: 10px"></el-switch>
  <el-button @click="graphPanningStatus" type="primary" style="margin: 10px">打印画布平移状态</el-button>
  <div id="container"></div>
<p>    拖拽可能和其他操作冲突，此时可以设置 modifiers 参数，设置修饰键后需要按下修饰键并点击鼠标才能触发画布拖拽。</p>
<p></p>
<p>const graph = new Graph({</p>
<p>  panning: {</p>
<p>    enabled: true,</p>
<p>    modifiers: 'shift',</p>
<p>  },</p>
<p>})</p>
<p>还可以配置 eventTypes 来设置触发画布拖拽的行为，支持 leftMouseDown、 rightMouseDown、mouseWheel，默认为 ['leftMouseDown'] 。</p>
<p></p>
<p>const graph = new Graph({</p>
<p>  panning: {</p>
<p>    enabled: true,</p>
<p>    eventTypes: ['leftMouseDown', 'rightMouseDown', 'mouseWheel']</p>
<p>  },</p>
<p>})</p>
<p>可以通过以下 API 来启用/禁止画布平移：</p>
<p></p>
<p>graph.isPannable() // 画布是否可以平移</p>
<p>graph.enablePanning() // 启用画布平移</p>
<p>graph.disablePanning() // 禁止画布平移</p>
<p>graph.togglePanning() // 切换画布平移状态</p>
  <p><a href="https://x6.antv.vision/zh/docs/api/graph/graph#panning">Graph API</a></p>
  <p><a href="https://x6.antv.antgroup.com/api/graph/panning#modifiers">画布平移 API</a></p>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph } from "@antv/x6";
import { onMounted, ref } from "vue";

const switchValue = ref(false);

let graph = null;

const switchChange = (val: boolean) => {
  if (true === val) {
    ElMessage({
      message: "画布平移开启",
      type: "success",
    });
    graph.enablePanning();
  } else if (false === val) {
    ElMessage({
      message: "画布平移关闭",
      type: "success",
    });
    graph.disablePanning();
  } else {
    ElMessage({
      message: "开关值不合法：" + val,
      type: "error",
    });
  }
};

const graphPanningStatus = () => {
  ElMessage({
    message: "画布平移状态：" + (graph.isPannable() ? "画布平移开启" : "画布平移关闭"),
    type: "success",
  });
};

const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    mousewheel: true,
    // 画布平移关闭
    panning: false,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
  });

  //创建流程图数据
  const data = {
    //节点数据
    nodes: [
      {
        id: "node1",
        shape: "rect",
        x: 40,
        y: 40,
        width: 100,
        height: 40,
        label: "hello",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
      {
        id: "node2",
        shape: "rect",
        x: 160,
        y: 180,
        width: 100,
        height: 40,
        label: "world",
        attrs: {
          body: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
            fill: "#fff",
            rx: 6,
            ry: 6,
          },
        },
      },
    ],
    //边数据
    edges: [
      {
        shape: "edge",
        source: "node1", //起始点
        target: "node2", //目标点
        label: "x6",
        attrs: {
          line: {
            stroke: "#8f8f8f",
            strokeWidth: 1,
          },
        },
      },
    ],
  };

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>
